<template>
  <transition name="fade">
    <div class="set_page" v-if="showSet">
      <div class="set_bg" v-if="showSet" @click="closeSelf"></div>
      <div class="pastkwrap">

        <div class="phone_img">
          <img :src="imgFile"/>
        </div>
        <div class="pastk">
          <div class="indexinfo pr">
            <a href="javascript:;" class="closebtn" v-if="showSet" @click="closeSelf">×</a>
            <div class="choosetype clearfix">
              <a v-if="userVip == 2" href="javascript:;" class="type1 active">会员无水印下载</a>
              <a v-if="userVip == 0" href="javascript:;" class="type1" :class="tab == 1 ? 'active' : '' " @click="checkbtnwrap(1)">免费下载</a>
              <a v-if="userVip == 0" href="javascript:;" class="type2" :class="tab == 2 ? 'active' : '' " @click="checkbtnwrap(2)">无水印下载</a>
            </div>
            <div class="btnwrap" v-show=" tab == 1">
              <div class="indextext">
                <ul>
                  <li><label>文件名</label> <span v-text="sceneTitle" v-bind:title="sceneTitle"></span></li>
                  <li><label>文件格式</label> <em>jpg</em></li>
                  <li><label>质量</label> <span>高清</span></li>
                </ul>
              </div>
              <div class="downbutton"><a :href="imgFile" :download="sceneTitle">下载</a></div>
              <p>尺寸：720×1280</p>
            </div>
            <div class="btnwrap" v-show=" tab == 2">
              <div class="indextext">
                <ul>
                  <li><label>文件名</label> <span v-text="sceneTitle" v-bind:title="sceneTitle"></span></li>
                  <li><label>原价支付</label> <i v-text="watermarkPrice"></i></li>
                  <li><label>支付方式</label> <em class="zhye"><i></i><font v-text="zffs"></font></em><em class="vipfree"><a href="http://www.zhangu365.com/user/vip/index.html" target="_blank"><i></i>会员免费</a></em></li>
                </ul>
              </div>
              <div class="accountinfo clearfix">
                <span>账户余额：<i v-text="useAmount"></i>元</span>
                <a href="http://www.zhangu365.com/user/account/index.html" target="_blank">去充值</a>
                <span>最高送100%</span>
              </div>
              <a :href="imgWaterFile" :download="sceneTitle" style="display:none;" id="imgWaterFile">下载</a>
              <div class="downbutton"><a href="javascript:;" @click="downWatermarkImg" style="margin-top:0;">确认下载</a></div>
              <p>尺寸：720×1280</p>
            </div>
            <div class="qrcode">
              <canvas id="canvas"></canvas>
            </div>
            <p class="codetip">扫一扫，保存到手机</p>
          </div>
        </div>
      </div>
    </div>

  </transition>
</template>

<script>

  var swipers = null;
  var _self = this;
  var c_autoplay;
  var c_autoplayS;

  import api from '../api/index.js'
  import {mapActions, mapGetters} from 'vuex'
  import Util from '../Util/index.js'
  import CountDown from '@/components/common/vue2-countdown'
  import UploadPic from './common/UploadCover'
  import QRCode from 'qrcode'
  export default {
    name: "preview",
    props: ['showSet', 'auto-play','imgFile','userVip'],
    components: {
      CountDown,
      UploadPic,
      QRCode,
    },
    watch: {
   
    },
    computed: {
      ...mapGetters([
        "title",
        "currentPageData",
        "currentPageMain",
        "checkedItems",
        "alertObj",
        "checkedItemData",
        "currentPageBg",
        "sceneInfo",
        "userinfo",
        "currentPage",
        "pagesData",
        "currentPageData1"

      ]),
      ...mapActions({
        // 在input 的blur 事件中触发回调，并将输入值作为参数返回到store中
        Del: 'delItem',
      }),
    },

    data() {
      return {
        sceneTitle: "",
        codetitle:"",
        tab:1,
        watermarkPrice:"",
        useAmount:"0.00",
        imgWaterFile:"",
        zffs:"",
      }
    },
    created(){

    },
    mounted() {
      // debugger
      this.sceneTitle = this.html_decodes(this.$store.state.workData.sceneinfo['name']);
      this.codetitle = this.$store.state.workData.sceneinfo['code'];
      this.watermarkPrice = "￥"+this.$store.state.workData.sceneinfo['watermark_price'];
      this.useAmount = this.$store.state.workData.userinfo['amount'];
      if(this.$store.state.workData.sceneinfo['is_watermark'] == 1){
        this.zffs = '账户余额';
      }else{
        this.zffs = '已支付';
      }
      this.useqrcode();
    },

    methods: {
       useqrcode(){
          var canvas = document.getElementById('canvas')

          QRCode.toCanvas(canvas, api.showPoster(this.$store.state.workData.sceneinfo['id']), function (error) {
          if (error) console.error(error)
            console.log('success!');
          })
      }, 
      closeSelf() {
        // debugger
        this.$emit("close");
      },
      downWatermarkImg(){
        var dom = $("#imgWaterFile");
        if(dom.attr('href')){
          dom[0].click();
          return false;
        }
        var _self = this;
        var attr = 1;
        var tip = this.$Message.loading({
          content: '生成中...',
          duration: 0
        });
        this.$http({
          method: 'post',
          url: api.getRemovalattribute(),
          data: {
            attr: attr,
            sceneid: this.$route.query.sceneid,
          },

        }).then(res => {
          setTimeout(tip, 1);
          // debugger
          if (res.data.code == 200) {

            if (res.data.status == true) {
              isShow = false;//控制刷新页面时受否弹出刷新提示框
              this.$Message.success('生成成功!');
              this.isChange = false;
              _self.showSet = true;
              //debugger
              if(res.data.amount){
                _self.useAmount = res.data.amount;


                var params1 = {};
                params1.keys=['is_watermark'];
                params1.values=[2];
                _self.$store.dispatch('changeSceneInfo',params1);

                //debugger
                var params = {};
                params.key="amount";
                params.value =res.data.amount;
                _self.$store.dispatch('changeUserData',params);



              }
              _self.imgWaterFile = res.data.imgfile+"?t="+new Date().getTime();
              _self.zffs = '已支付';
              setTimeout(function () {
                    dom[0].click();
                }, 2000);
              //window.location.href=res.data.imgfile+"?t="+new Date().getTime();
            } else {

              this.$Message.error(res.data.msg);
            }


          } else {

            this.$Message.error('网络开小差啦~');
          }

        }).catch(error => {
          // alert(error);
          setTimeout(tip, 1);
          this.$Message.error('网络开小差啦~');
        });
      },
      checkbtnwrap(index){
        this.tab = index;
      },
      html_decodes(str){
        var tt;
        for (var i = 0; i < str.length; i++) {
          tt = str.replace(/&nbsp;/g, " ");
        }
//        str.replace(/&nbsp;/g, " ");
//        console.log(tt)
        return tt;
      },
      
    }

  }
</script>

<style type="text/javascript" scoped>
  .item {
    display: none;
  }

  .current {
    display: block;
  }

  .mask {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
  }
  .pastkwrap{
    position: absolute;
    width: 840px;
    height: 570px;
    left: 50%;
    top: 50%;
    margin: -285px 0 0 -420px;
    background: url(http://www.zhangu365.com/static/images/phone_bg.jpg) no-repeat center;
    background-size: 100% 100%;
    border-radius: 10px;
  }
  .pastk {
    position: absolute;
    width:549px;
    height: 100%;
    right: 0;
    top: 0;
    z-index: 99998;
  }

  .set_page {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /*background-color: red;*/
    z-index: 99999;
  }

  .set_bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
  .phone_img{
    width:237px;
    height: 536px;
    overflow: hidden;
    padding: 58px 17.5px 120px;
    background: url(http://www.zhangu365.com/static/images/phone_wrap.png) no-repeat center;
    background-size: 100% 100%;
    margin: 34px 0 0 55px;
  }
  .phone_img img{
    width: 100%;
    height: 100%;
  }
  .indexinfo {
    padding-top: 40px;
    padding-left: 54px;
    padding-right: 64px;
  }

  .indexinfo .closebtn{
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    line-height: 20px;
    background: #23d7bc;
    top: -10px;
    right: -10px;
    color: #fff;
    text-align: center;
    font-size: 18px;
    border-radius: 50%;
    z-index: 100;
  }

  .btnwrap{
    background: #fff;
    padding-top: 30px;
    border-radius: 5px;
  }

  .indextext {
    width: 432px;
    font-size: 16px;
    padding-right: 52px;
  }

  .indextext li, .indexedit li {
    font-size: 15px;
    overflow: hidden;
    height: 40px;
    line-height: 40px;
    margin-bottom: 30px;
  }
  .indextext li:last-child{
    margin-bottom: 0;
  }
  .indextext li label{
    display: inline-block;
    float: left;
    width: 100px;
    height: 40px;
    line-height: 40px;
    text-align: right;
    padding-right: 10px;
    padding-left: 30px;
    text-align: justify;
  }
  .indextext li label:after{
    content: "";
    display: inline-block;
    width: 100%;
  }
  .indextext li span{float: left;height:40px;line-height: 40px; text-overflow: ellipsis;overflow: hidden;white-space: nowrap;border: 1px solid #e6e6e6;width: 280px;border-radius: 3px;padding: 0 18px;}
  .indextext li em{float: left;width: 80px; height:40px;line-height: 40px;border: 1px solid #23d7bc;border-radius: 5px;background: url(../assets/images/phone_check.jpg) no-repeat right bottom;text-align: center;color: #23d7bc}
  .indextext li em.zhye{width: 120px;text-align: left;color: #696969;}
  .indextext li em.vipfree{width: 120px;text-align: left;margin-left: 10px;background-color: #18ccc0;background-image:none;cursor: pointer;}
  .indextext li em.vipfree a{color: #ffffff;}
  .indextext li em i{float: left;width: 20px; height:20px;margin: 9px 10px 0 10px; background: url(../assets/images/zhye_icon.png) no-repeat center;}
  .indextext li em.vipfree i{background: url(../assets/images/vip_free.png) no-repeat center;}
  .indextext li i{font-size: 18px;color: #23d7bc}



  .btnwrap p{width: 280px;text-align: center;font-size: 12px;color: #999;height: 50px;line-height: 50px;margin-left: 100px;}
  .downbutton{
    overflow: hidden;
  }
  .downbutton a{
    color:#fff;
    height: 40px;
    line-height: 40px;
    background: #18ccc0;
    color: #fff;
    border-radius: 4px;
    width: 280px;
    margin-left: 100px;
    margin-top: 30px;
    float: left;
    text-align: center;
    font-size: 14px;
  }
  .qrcode{
    width: 100px;
    height: 100px;
    margin:18px auto 0;
  }
  p.codetip{
    text-align: center;
    font-size: 13px;
    color: #696969;
  }
  .qrcode canvas{width: 100px !important;height: 100px !important;}

  .choosetype{background: #eef1f4;padding: 0 20px;}
  .choosetype a{float: left;height: 45px;line-height: 45px;margin: 0 20px;font-size: 14px;color: #696969;}
  .choosetype a.active{border-bottom: 2px solid #23d7bc;color: #23d7bc;position: relative;font-weight: bold;}
  .choosetype a.active:after{content: '';position: absolute;width: 0;height: 0;bottom: -6px;left: 50%;margin-left: -5px; border-top: 4px solid #23d7bc;border-right: 5px solid transparent;border-left: 5px solid transparent;}
  .accountinfo{margin-left: 100px;}
  .accountinfo span{float: left;height: 40px;line-height: 40px;font-size: 14px;color: #999;}
  .accountinfo span i{color: #ff884e;}
  .accountinfo a{float: left;height: 40px;line-height: 40px;font-size: 14px;color: #23d7bc;margin:0 10px 0 30px;}

</style>
